<template>
  <h1>具名插槽使用子元素给父元素传递数据</h1>
  <GetAttrName>
    <template #header="slotProps">
      <p>首页</p>
      <p> 88父元素88: {{ msg }} 00子元素00- {{ slotProps.msg}} </p>
    </template>

    <template #foot="footProps">
      <p>网页底部的脚标</p>
      <p> 88父元素88: {{ msg }} 00子元素00- {{ footProps.mk }} </p>
      <p> 没有具名的时候,可以使用 .变量名调用,但是具名了以后,就必须用绑定的参数进行调用了</p>
    </template>
  </GetAttrName>
  <hr>
  <hr>
  <h3>父组件</h3>
  <SlotShow>
    <h4>插槽内容</h4>
    <p> {{msg}}</p>
    <p> 插槽可以作为公共的栏目板块使用,哪里需要就调用,一行代码就可以拿到一整块的内容</p>
  </SlotShow>

  <h3>具名插槽</h3>
  <p>给同一个插槽区分不同的明天,子元素通过名称调用到不同的插槽</p>
  <NameSlot>
    <template v-slot:header>
      <h1>具名插槽header</h1>
    </template>
    <template v-slot:foot>
      <h1>具名插槽foot</h1>
    </template>
    <template #box>
      <p>v-slot: 可以简写为 #</p>
    </template>
  </NameSlot>

  <AttrSlot v-slot="slotPros">
    <h2>AttrSlot同时需要父元素和子元素的数据</h2>
    <p>需要把父元素的插槽渲染的时候,把子组件的内容传递给父元素</p>
    <p> 父组件data: {{msg}} 子组件数据: {{ slotPros.childMsg}} </p>
  </AttrSlot>


</template>

<script>
import SlotShow from "@/more_slot/SlotShow.vue";
import NameSlot from "@/more_slot/NameSlot.vue";
import AttrSlot from "@/more_slot/AttrSlot.vue";
import GetAttrName from "@/more_slot/GetAttrName.vue";
export default {
  data() {
    return {
      msg:"动态的插槽内容,可以动态生成,但是也是在父元素里面定义,子元素显示"
    }
  },
  components: {
       SlotShow,NameSlot,AttrSlot,GetAttrName
  }
}
</script>